<template lang="html">

  <div class="index">
    <mu-carousel>
      <mu-carousel-item>
        <img src="../../public/img/images/ia_100000264.jpg">
      </mu-carousel-item>
      <mu-carousel-item>
        <img src="../../public/img/images/ia_100000267.jpg">
      </mu-carousel-item>
    </mu-carousel>
    <div class="finance_products">
      <div class="finance">理财产品推荐</div>
    </div>
    <ul>
      <ProductList v-for="item in list" :key="item.id" :data="item"></ProductList>
    </ul>
    <div class="news_recommend">
      <div class="news">新闻推荐</div>
    </div>
    <ul class="news-ul">
      <li v-for="item in news" :key="item.id">
        <div class="news-title">
          {{item.title}}
        </div>
        <router-link :to="'/news/' + item.id">
          <div class="news-open"></div>
        </router-link>
      </li>
    </ul>
    <div class="subscribe">
      <div class="sub">预约用户</div>
    </div>
    <div class="subseribe-list">
      <div v-for="item in user" :key="item.id" class="user-list">
        <div class="user-title">
          <p :style="randerRgb()">{{item.name ? item.name.substr(item.name.length - 1, 1) : "空"}}</p>
        </div>
        <div class="user-content">
          <div class="user-up">
            <!-- 截取字符串最后一个字符 -->
            <span>{{item.name ? item.name.substr(0, 1) + '先生' : "姓名未填写"}}</span>
            <span>{{item.phone.substr(0, 3) + "****" + item.phone.substr(7)}}</span>
          </div>
          <div class="user-down">
            <span>{{item.createdAt}}</span>
            <span>{{'预约' + item.premoney + '万'}}</span>
          </div>
        </div>
      </div>
    </div>
    <mu-tabs center color="teal">
		<mu-tab to="/" tag="div">
			<mu-icon value="home"></mu-icon>
			首页
		</mu-tab>
		<mu-tab to="/money" tag="div">
			<mu-icon value="local_atm"></mu-icon>
			投资理财
		</mu-tab>
		<mu-tab to="/order" tag="div">
			<mu-icon value="favorite"></mu-icon>
			预约产品
			</mu-tab>
		<mu-tab to="my" tag="div">
			<mu-icon value="person_pin"></mu-icon>
			我的
		</mu-tab>
    </mu-tabs>
    <!-- 弹框 -->
    <mu-container >
		<mu-dialog title="Dialog" width="360" :open="openSimple" class="alert">
			<h3 slot="title">合规投资者认定</h3>
			<div class="text">
				<p>根据《私募投资基金监控管理暂行办法》，夜郎财富只对"具备相应风险识别能力和风险承担能力，对投资私募基金的特定合格投资者宣传，推介相关私募投资基金产品"。您需要身份认证后才能访问。主要要求有三：</p>
				<p>(一)家庭金融资产不低于500万元，或者近3年本人年均收入不低于40万元，且具有2年以上投资经历。</p>
				<p>(二)最近1年末净资产不低于1000万元的法人单位。</p>
				<p>(三)金融监督管理部门视为合格投资者的其他情形。</p>
			</div>
			<mu-divider></mu-divider>
			<mu-button slot="actions" flat color="orange" @click="closeAlert">确定符合</mu-button>
		</mu-dialog>
	</mu-container>
    
  </div>

</template>

<script type="text/javascript">
//引入列表组件
import ProductList from "../components/ProductList.vue"
let loading;
  export default  {
    components: { ProductList },
    name: 'index',
    props: [],
    mounted () {

    },
    data () {
      return {
        //首页推荐
        list: [],
        //截取的部分
        others: [],
        //新闻列表
        news: [],
        //用户列表
        user: [],
        //剩余用户
        user1: [],
        //弹框
        openSimple: false,
        //加载全局的状态
        loading2: false,
        //头部弹框
        // 弹框相关属性
        alert: {
          // 弹框是否显示
          show: false,
          // 弹框类型
          iconType: 'warning',
          // 弹框显示文字
          text: '预约成功',
          // 弹框颜色
          color: 'error'
        }
      }
    },
    //组件创建完成
    created() {
      //获取理财产品推荐列表数据
      this.$http
      .post('/api/product/list')
      .then(({ data }) => {
        //截取前14个
        this.list = data.data.slice(0, 14);
        //存储剩余的数据
        this.others = data.data.slice(14);
      })
      .catch(err=>{console.log(err)})
      //获取新闻数据
      this.$http
        .get('/api/news/list')
        .then(({ data }) => {
          this.news = data.data;
        })
      //获取预约用户信息
      this.$http
        .post('/api/product/bookList')
        .then(({ data }) => {
          //截取前8个
          this.user = data.data.slice(0, 8);
          this.user1 = data.data.slice(8);
        })
      //首页创建前 加载页面延迟两秒
      loading = this.$loading();
      //组件创建完成弹框出现
      this.openSimple = true;
    },
    methods: {
      //获取随机颜色
      randerRgb() {
        return {
          background: '#' + Math.random().toString(16).substr(-6)
        };
      },
      //隐藏弹框
      closeAlert () {
        this.openSimple = false;
      },
    },
    //计算属性数据
    computed: {
      nameEnd() {
        console.log(this.user)
        return this.user.name;
        // item.name.substring(item.name.length - 1, 1)
      }
    },
    //监听
    watch: {
      list(arr) {
        if(arr.length > 0) {
          loading.close();
        }
      }
    }
}


</script>

<style lang="scss">
  .index {
    margin-bottom: 80px;
    .mu-carousel {
      height: 220px;
      img {
        height: 100%;
      }
    }
    .finance_products{
      line-height: 1.5;
      background-color: rgb(0, 188, 212);
      color: white;
      .finance {
        text-align: left;
        width:100%;
        padding-left: 12px;
        padding-right: 12px;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        font-size: 20px;
        font-weight: 400;
        line-height: 56px;
      }
    }
    .news_recommend {
      line-height: 1.5;
      background-color: rgb(92, 107, 192);
      color: white;
      .news {
        text-align: left;
        width:100%;
        padding-left: 12px;
        padding-right: 12px;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        font-size: 20px;
        font-weight: 400;
        line-height: 56px;
      }
    }
    .news-ul {
      padding: 10px 15px;
      list-style: none;
      
      li {
        display: flex;
        border-bottom: 1px solid #666;
        padding: 10px 0px 10px;
        .news-title {
          width: 80%;
          font-size: 16px;
          line-height: 32px;
        }
        a {
          .news-open {
          width: 20%;
          position: relative;
          &:before,
          &:after {
            content: '';
            position: absolute;
            top: 15px;
            left: 45px;
            width: 0;
            font-size: 0;
            border: 10px solid transparent;
            border-left-color: #000;
          }
          &:after {
            border-left-color: #fff;
            left: 42px;
            top: 15px;
            }
          }
        }
        
      }
    }
    .subscribe {
      line-height: 1.5;
      background-color: rgb(0, 150, 136);
      color: white;
      .sub {
        text-align: left;
        width:100%;
        padding-left: 12px;
        padding-right: 12px;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        font-size: 20px;
        font-weight: 400;
        line-height: 56px;
      }
    }
    .subseribe-list {
      padding: 2px 15px;
      background-color: #fff;
      .user-list {
        width: 100%;
        height: 72px;
        display: flex;
        padding: 15px 0;
        .user-title {
          line-height: 40px;
          width: 60px;
          text-align: center;
          font-size: 20px;
          font-weight: 500;
          p {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            color: #fff;
            display: inline-block;
          }
        }
        .user-content {
          .user-up {
            font-size: 16px;
            line-height: 24px;
            height: 24px;
            span {
              font-size: 16px;
            }
          }
          .user-down {
            font-size: 14px;
            color: rgba(0,0,0,.54);
          }
        }
      }
    }
    .mu-tabs-center {
      // display: flex;
      position: fixed !important;
      bottom: 0;left: 0;
      justify-content: space-evenly !important;
    }
  }
  .mu-dialog-actions {
    justify-content: center;
  }
  .mu-dialog {
	.mu-dialog-title {
		padding: 10px 20px 10px;
		color: #123123;
		h3 {
			// text-align: center!important;
			display: block;
			margin: 0 auto;
			font-size: 16px;
		}
	}
	.mu-dialog-body {
		padding: 0;
		.text {
			margin-bottom: 10px;
			padding: 0px 24px 0px;
			
			p {
				font-size: 12px;
				&:first-child {
					text-indent: 2em;
				}
			}
		}
	}
	.mu-dialog-actions {
		button {
			display: block;
			margin: 0 auto;
		}
	}
}
</style>
